<template>
<!-- 房屋添加 -->
    <div class="Addahouse">
         <!-- 添加房屋表头 -->
        <div class="AddCommunitytitle">
            <p>
                <i class="el-icon-arrow-left"></i>
                <span>添加装修申请</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 房屋添加输入内容板块 -->
        <div class="Addahousecontent">
            <div class="middlecountent">
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">选择小区：</span>
                    </p>
                    <el-select v-model="value" placeholder="请选择单元" class="storeid">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" >
                        </el-option>
                    </el-select>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">业主姓名：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">业主手机号：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">装修押金：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">装修周期：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">预计工期：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">装修负责人：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">负责人电话：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>

                <div class="payloaders">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">相关证据：</span>
                    </p>
                    <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove" class="photowall">
                    <div class="text">
                        <i class="el-icon-plus"></i>
                         <p>上传照片</p>
                    </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
                 <div class="payloaders">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">装修图纸：</span>
                    </p>
                    <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove" class="photowall">
                    <div class="text">
                        <i class="el-icon-plus"></i>
                         <p>上传照片</p>
                    </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
                <div class="payloaders">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">备注信息：</span>
                    </p>
                    <el-input
                        type="textarea"
                        placeholder="请输入备注信息"
                        v-model="textarea"
                        maxlength="300"
                        show-word-limit
                        class="textarea">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 状态：</span>
                    </p>
                    <div class="choice">
                        <el-radio v-model="radio" label="1">   待支付</el-radio>
                        <el-radio v-model="radio" label="2">   待验收</el-radio>
                        <el-radio v-model="radio" label="3">  已验证</el-radio>
                        <el-radio v-model="radio" label="4">  已完成</el-radio>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加房屋保存按钮 -->
        <div class="contentfooter">
            <el-button plain class="reseatebutton" @click="reseate">取消</el-button>
            <el-button type="primary" class="savebutton" @click="save">提交</el-button>
            
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            value:'',//下拉选项框
            input:'',//输入框
            radio: '1', //单选
            textarea:'',//备注信息多行文本输入框
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],//下拉选项框选项
            dialogImageUrl: '',
            dialogVisible: false    //照片上传
        }
    },
    methods:{
        // 添加房屋底部保存 重置按钮
        save(){
            console.log("提交")
        },
        reseate(){
            console.log("取消")
        },
        // 照片上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
    mounted(){
        // fetch("http://127.0.0.1/user/all").then(res=>res.json()).then(res1=>{
        //     console.log(res1)
        // }).catch(err=>{
        //     console.log(err)
        // })
    }
}
</script>

<style lang="scss" scoped>
    .Addahouse{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加房屋标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加房屋输入框内容板块
        .Addahousecontent{
            width: 100%;
            padding: 40px 60px 40px 40px;
            box-sizing: border-box;
            background-color: #fff;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            .middlecountent{
                margin-left: 100px;
                .payloaders{
                    width: 100%;
                    margin-bottom: 15px;
                    display: flex;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        
                    }
                    ::v-deep .el-upload--picture-card{
                        width: 100px !important;
                        height: 100px !important;
                        border: 2px solid #c0ccda;
                        display: flex;
                        justify-content: center;
                        .text{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            p{
                                line-height: normal !important;
                                font-size: 14px;
                                color: #999;
                                margin-top: 5px;
                            }
                        }
                    }
                    .textarea{
                        width: 650px;
                        height: 118px;
                        ::v-deep .el-textarea__inner{
                            width: 650px;
                            height: 118px;
                        }
                        ::v-deep .el-textarea__inner {
                            border-color: #C0C4CC !important;
                            resize: none;
                        }
                    }
                    ::v-deep .el-upload-dragger{
                        width: 120px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .el-icon-upload{
                            font-size: 20px !important;
                            margin: 0 10px 0 0 !important;
                        }
                    }
                    .el-upload__tip{
                        font-size: 14px;
                        color: #999;
                    }
                    ::v-deep .el-upload--picture-card:hover, .el-upload:focus {
                        border-color: #1abc9c;
                        color: #1abc9c !important;
                    }
                    ::v-deep .el-upload--picture-card:hover .text p,::v-deep .el-upload--picture-card:hover .text i{
                        color: #1abc9c !important;
                    }
                }
                .payloader{
                    width: 100%;
                    height: 40px;
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .note{
                        font-size: 14px;
                        color: #666666;
                    }
                    .countent{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .housetype{
                        width: 400px;
                        display: flex;
                        align-items: center;
                        span{
                            font-size: 14px;
                            margin: 0 15px;
                            color: #666666;
                        }
                        .housetext{
                            width: 77px;
                        }
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .datapicker{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .storeid,.building{
                        width: 400px;
                            ::v-deep .el-input__inner {
                                border-color: #C0C4CC !important;
                            }
                    }
                    
                }
            }
            
            .Addahousecontenttop{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .contenttopleft{
                     width: 520px;
                    margin-top: 30px;
                    
                }
            }
            .Addahousecontentbottom{
                width: 100%;
                background-color: #fff;
                 // 备注信息
                .notesinformation{
                    display: flex;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        white-space: nowrap;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .textarea{
                        width: 1020px;
                        height: 175px;
                        ::v-deep .el-textarea__inner{
                            width: 1020px;
                            height: 175px;
                        }
                        ::v-deep .el-textarea__inner {
                            border-color: #C0C4CC !important;
                            resize: none;
                        }
                    }
                }
            }
            
        }
        //添加房屋底部按钮
        .contentfooter{
            width: 100%;
            box-sizing: border-box;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            .savebutton,.reseatebutton{
                width: 80px;
                height: 30px;
                padding: 0 !important;
                i{
                    margin-right: 5px;
                }
                ::v-deep span{
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700 !important;
                    font-style: normal;
                    font-size: 12px;
                }
            }
            .savebutton{
                margin-right: 40px;
                span{
                    color: #0079FE !important;
                }
            }
            .createbutton{
                width: 80px;
                height: 30px;
                i{
                    margin-right: 5px;
                }
                span{
                    color: #fff;
                }
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF !important;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>